<script setup>
defineProps({
  name: String,
  size: {
    type: String,
    default: '1em',
  },
  color: {
    type: String,
    default: 'black',
  },
})
</script>

<template>
  <svg class="icon" aria-hidden="true" :style="{ fontSize: size + 'px', color: color }">
    <use :xlink:href="`#${name}`"></use>
  </svg>
  <span :style="{ fontSize: size + 'px', color: color, marginLeft: '0.5em' }">
    <slot></slot>
  </span>
</template>

<style scoped></style>
